<template>
  <div>
    <el-dialog
      :title="info.isAdd ? '添加' : '编辑'"
      :visible.sync="info.isShow"
      @close="close"
    >
      <div>{{ user }}{{ timeArr }}</div>
      <el-form label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="user.title"></el-input>
        </el-form-item>
        <el-form-item label="活动期限">
          <el-date-picker
            v-model="timeArr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select
            v-model="user.first_cateid"
            @change="changeCateOption"
            placeholder="请选择"
          >
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级分类">
          <el-select
            v-model="user.second_cateid"
            placeholder="请选择"
            @change="changeSecondCateOption"
          >
            <el-option
              v-for="item in secondCateidList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品">
          <el-select v-model="user.goodsid" placeholder="请选择">
            <el-option
              v-for="item in goodsList"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="user.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="info.isAdd" type="primary" @click="add"
          >添 加</el-button
        >
        <el-button v-else type="primary" @click="update">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {
  reqcatelist,
  reqgoodslist,
  reqseckadd,
  reqseckinfo,
  reqseckedit
} from "../../../http/api";
import { successAlert, errorAlert } from "../../../utils/alert";
import { formClose } from "../../../mixins/index";
export default {
  mixins: [formClose],
  props: ["info"],
  data() {
    return {
      user: {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      },
      //二级分类列表
      secondCateidList: [],
      //商品列表
      goodsList: [],
      //开始结束时间数组
      timeArr: [],
    };
  },
  computed: {
    ...mapGetters({ cateList: "cate/list" }),
  },
  mounted() {
    //请求一级分类列表
    this.getCateList();
  },
  methods: {
    ...mapActions({
      getBannerList: "banner/getList",
      getCateList: "cate/getList",
      getSeckillList: "seckill/getList",
    }),
    //清空表单
    empty() {
      this.user = {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      };
      //二级分类列表
      this.secondCateidList = [];
      //商品列表
      this.goodsList = [];
      //开始结束时间数组
      this.timeArr = [];
    },
    //获取一条用户信息
    async getOne(id) {
      let { data: res } = await reqseckinfo({ id });
      console.log(res);
      if (res.code == 200) {
        this.user = res.list;
        this.user.id = id;
        //处理时间数据
        this.timeArr = [new Date(this.user.begintime-0).toUTCString(),new Date(this.user.endtime-0).toUTCString()]
        //请求二级分类，商品列表数据
        this.getSecondCateidList().then(()=>{
          this.getGoodsList();
        });
      }
    },
    //添加
    async add() {
      //处理时间数据
      this.user.begintime = new Date(this.timeArr[0]).getTime();
      this.user.endtime = new Date(this.timeArr[1]).getTime();
      let { data: res } = await reqseckadd(this.user);
      if (res.code == 200) {
        successAlert(res.msg);
        //添加成功关闭弹窗
        this.info.isShow = false;
        //清空数据
        this.empty();
        //重新请求列表页数据
        this.getSeckillList();
      }
    },
    //修改
    async update() {
       //处理时间数据
      this.user.begintime = new Date(this.timeArr[0]).getTime();
      this.user.endtime = new Date(this.timeArr[1]).getTime();
      let { data: res } = await reqseckedit(this.user);
      if (res.code == 200) {
        successAlert(res.msg);
        //添加成功关闭弹窗
        this.info.isShow = false;
        //清空数据
        this.empty();
        //重新请求列表页数据
        this.getSeckillList();
      }
    },
    //获取二级分类列表
    getSecondCateidList() {
      return new Promise( async(resolve,reject) => {
        let { data: res } = await reqcatelist({ pid: this.user.first_cateid });
        if (res.code == 200) {
          this.secondCateidList = res.list ? res.list : [];
          resolve();
        }
      });
    },
    //获取商品列表
    async getGoodsList() {
      let { data: res } = await reqgoodslist({
        fid: this.user.first_cateid,
        sid: this.user.second_cateid,
      });
      if (res.code == 200) {
        this.goodsList = res.list ? res.list : [];
      }
    },
    //用户改变一级分类列表时触发
    changeCateOption() {
      this.goodsList = this.secondCateidList = [];
      this.user.second_cateid = this.user.goodsid = "";
      this.getSecondCateidList();
    },
    //用户改变二级分类列表时触发
    changeSecondCateOption() {
      this.goodsList = [];
      this.user.goodsid = "";
      this.getGoodsList();
    },
  },
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
.my-upload {
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  position: relative;
  h3 {
    text-align: center;
    line-height: 100px;
  }
  input,
  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  input {
    opacity: 0;
    background-color: transparent;
  }
}
</style>